<template>
    <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <div class="w-full max-w-md space-y-8 bg-white p-8 rounded-xl shadow-lg">
            <div>
                <h2 class="mt-6 text-center text-3xl font-bold text-gray-900">登录</h2>
                <p class="mt-2 text-center text-sm text-gray-600">
                    或 <router-link to="/register" class="font-medium text-indigo-600 hover:text-indigo-500 transition-colors">立即注册</router-link>
                </p>
            </div>

            <form @submit.prevent="handleLogin" class="mt-8 space-y-6">
                <div class="rounded-md shadow-sm -space-y-px">
                    <div class="mb-4">
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-envelope text-gray-400"></i>
                            </div>
                            <input id="email" name="email" type="email" required
                                   class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm sm:text-sm transition-all"
                                   placeholder="your@email.com" v-model="email">
                        </div>
                        <div v-if="errors.email" class="mt-1 text-red-500 text-sm">{{ errors.email }}</div>
                    </div>

                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input id="password" name="password" type="password" required
                                   class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm sm:text-sm transition-all"
                                   placeholder="••••••••" v-model="password">
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <button type="button" class="text-gray-400 hover:text-gray-600" @click="togglePasswordVisibility">
                                    <i :class="showPassword ? 'fa fa-eye-slash' : 'fa fa-eye'"></i>
                                </button>
                            </div>
                        </div>
                        <div v-if="errors.password" class="mt-1 text-red-500 text-sm">{{ errors.password }}</div>
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember-me" name="remember-me" type="checkbox"
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="remember-me" class="ml-2 block text-sm text-gray-900">记住我</label>
                    </div>

                    <div class="text-sm">
                        <router-link to="/forgot-password" class="font-medium text-indigo-600 hover:text-indigo-500 transition-colors">忘记密码？</router-link>
                    </div>
                </div>

                <div>
                    <button type="submit"
                            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300 transform hover:scale-[1.02]">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <i class="fa fa-spinner fa-spin opacity-0 group-hover:opacity-100 transition-opacity" :class="{ 'opacity-100': loading }"></i>
            </span>
                        登录
                    </button>
                </div>

                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-300"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">或使用以下方式登录</span>
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-3">
                    <button type="button" class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                        <i class="fa fa-google"></i>
                    </button>
                    <button type="button" class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                        <i class="fa fa-facebook"></i>
                    </button>
                    <button type="button" class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                        <i class="fa fa-github"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data() {
            return {
                email: '',
                password: '',
                showPassword: false,
                errors: {},
                loading: false
            }
        },
        methods: {
            togglePasswordVisibility() {
                this.showPassword = !this.showPassword
            },
            validateForm() {
                const errors = {}
                let isValid = true

                if (!this.email.trim()) {
                    errors.email = '请输入邮箱'
                    isValid = false
                } else if (!this.isValidEmail(this.email)) {
                    errors.email = '请输入有效的邮箱地址'
                    isValid = false
                }

                if (!this.password.trim()) {
                    errors.password = '请输入密码'
                    isValid = false
                } else if (this.password.length < 6) {
                    errors.password = '密码长度至少为6个字符'
                    isValid = false
                }

                this.errors = errors
                return isValid
            },
            isValidEmail(email) {
                const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                return re.test(email)
            },
            async handleLogin() {
                if (!this.validateForm()) return

                this.loading = true

                try {
                    // 模拟登录API调用
                    await new Promise(resolve => setTimeout(resolve, 1500))

                    // 登录成功，跳转到首页
                    this.$router.push('/dashboard')
                    this.$toast.success('登录成功！')
                } catch (error) {
                    console.error('登录失败:', error)
                    this.$toast.error('登录失败，请检查您的邮箱和密码')
                } finally {
                    this.loading = false
                }
            }
        }
    }
</script>

<style scoped>
    /* 这里可以添加自定义样式 */
</style>